import React from 'react';
import { Layout } from 'antd';
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
import HeaderBox from '../component/HeaderBox';
import Home from './Home';
import System from './System';

/*
 * HashRouter开启HASH路由，一般我们把所有组件都用HashRouter包起来，目的是在各个组件中以后可以使用ROUTER中的一些方法了 
 */

class App extends React.Component {
	render() {
		return <HashRouter>
			<Layout>
				<HeaderBox />
				{/* 
				  * 配置一级路由表 
				  *   REACT路由默认：某一个规则匹配渲染组件，还会继续向下查找，把所有匹配规则的都渲染出来  =>Switch解决这个问题
				  *   默认匹配的规则是不严谨的：只要包含一个完整的规则体则都会符合要求 =>exact设置严谨性
				  *   /  都符合
				  *   /home  符合：/home  /home/a   不符合：/home2
				  */}
				<Switch>
					{/* <Route path='/' exact component={Home} /> */}
					<Redirect exact from='/' to='/home'/>

					<Route path='/home' component={Home} />

					{/* <Route path='/system' component={System} /> */}
					<Route path='/system' render={_ => {
						if (1 === 1) {
							//=>有权限
							return <System />;
						}
						//=>可以做提示或者渲染不同的组件
						return '';
					}} />

					<Redirect to='/home' />
					{/* <Route path='*' component={Home} /> */}
				</Switch>
			</Layout>
		</HashRouter>;
	}
}
export default App;